<template>
  <div class="article">
      <el-card shadow="hover" class="article-info animated fadeIn">
          <h2>获取腾讯"邮我"的链接</h2>
          <el-row class="meta">
            <span class="post-time">
              <span class="meta-item-icon"><i class="fa fa-calendar-o"></i></span>
              <span class="meta-item-text">发表于:2020-6-20</span>
              <time :title="'创建时间：'+detial.create_time" itemprop="dateCreated datePublished" :datetime="detial.create_time">{{(detial.create_time || '').split(' ')[0]}}</time>
              <span v-if="detial.update_time != null" class="meta-divider">|</span>
              <span v-if="detial.update_time != null" class="meta-item-icon"><i class="fa fa-calendar-check-o"></i></span>
              <span v-if="detial.update_time != null" class="meta-item-text">更新于</span>
              <time v-if="detial.update_time != null" :title="'修改时间：'+detial.update_time" itemprop="dateModified" :datetime="detial.update_time">{{(detial.update_time || '').split(' ')[0]}}</time>
            </span>
            <span class="post-category">
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-folder-o"></i></span>
              <span class="meta-item-text">分类于:技术杂谈</span>
              <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing"><el-link :href="'/category/'+detial.category_id+'.html'" target="_blank"><span itemprop="name">{{detial.cate_name}}</span></el-link></span>
            </span>
            <span class="meta-divider">|</span>
            <span class="meta-item-icon"><i class="fa fa-eye"></i>阅读次数：<span class="busuanzi-value" id="busuanzi_value_page_pv">200</span></span>
            <div class="post-symbolscount">
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-file-word-o"></i></span>
              <span class="meta-item-text">本文字数：</span>
              <span title="本文字数">1.6k</span>
              <span class="meta-divider">|</span>
              <span class="meta-item-icon"><i class="fa fa-clock-o"></i></span>
              <span class="meta-item-text">阅读时长 ≈</span>
              <span title="阅读时长">1 分钟</span>
            </div>
          </el-row>
          <el-row class="content">
            <!-- <div class="markdown-body" v-html="detial.content" v-highlight></div> -->
            <div class="markdown-body">
              <p>腾讯QQ邮箱提供了“邮我”组件，可以放在自己的网站上，让别人点击提供的图片或者链接就可以发Email过来，该文章分享的是如何获取到其中的链接。</p>
              <p>1、登陆自己的qq邮箱，点击设置，再选择账户，滚动到最底部找到邮我，最后点击使用邮我</p>
              <img src="../../static/art1.jpg"/>
              <p>2、选择我要体验</p>
              <img src="../../static/art2.jpg" />
              <p>3、选择自己喜欢的样式</p>
              <img src="../../static/art3.jpg" />
              <p>4、点击获取代码<br/>
其中href中内容就是我们想要的内容</p>
            </div>
          </el-row>
          <!-- <el-row class="prev-next">
            <div class="prev" v-if="detial.prev != null">
                上一篇
                <a :href="'/view/'+detial.prev.id" :title="detial.prev.title">{{detial.prev.title}}</a>
            </div>
            <div class="next" v-if="detial.next != null">
                下一篇：
                <a :href="'/view/'+detial.next.id" :title="detial.next.title">{{detial.next.title}}</a>
            </div>
          </el-row> -->
          <el-row class="prev-next">
            <div class="prev">
                上一篇
                <a href="/view/0">1</a>
            </div>
            <div class="next">
                下一篇：
                <a href="/view/2">1</a>
            </div>
          </el-row>
          <el-row class="reward-container">
            <el-button type="primary" onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">打赏</el-button>
            <div id="qr" style="display: none;">
              <div style="display: inline-block">
                <img src="../assets/wechatpay.jpg" alt="Mr.Yong 微信支付">
                <p>微信支付</p>
              </div>
              <div style="display: inline-block">
                <img src="../assets/alipay.jpg" alt="Mr.Yong 支付宝">
                <p>支付宝</p>
              </div>
            </div>
          </el-row>
          <el-row>
            <ul class="post-copyright">
              <li class="post-copyright-author">
                <strong>本文作者： </strong>Mr.Yong</li>
                <li class="post-copyright-link">
                  <strong>本文链接：</strong>
                  <!-- <a :href="'/view/'+detial.id" :title="detial.title">http://localhost:81/view/{{detial.id}}</a> -->
                   <a href="/view/1" :title="detial.title">http://localhost:81/view/1</a>
                </li>
                <li class="post-copyright-license">
                  <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="iconfont icon-creative-commons"></i> BY-NC-SA</a> 许可协议。转载请注明出处！
                </li>
              </ul>
          </el-row>
          <el-row>
            <div class="article-end">-------------本文结束<i class="iconfont icon-heart"></i>感谢您的阅读-------------</div>
          </el-row>
          <el-row class="tags">
            <a href="#" rel="tag" v-for="(tag,index) in detial.tags" :key='index'><i class="iconfont icon-tag"></i> {{tag.name}}</a>
          </el-row>
      </el-card>
      <Comments :params="cparams"></Comments>
  </div>
</template>

<script>
import Comments from "@/components/Comments";
import {getArticleInfo} from '@/api/article';
import '../assets/plugins/hljs'

import marked from 'marked'
//import 'highlight.js/styles/monokai.css'
//import 'highlight.js/styles/default.css'
//import hljs from 'highlight.js'
import {addCodeBtn} from '../assets/plugins/mavon'
//import '../assets/style/code.styl'
// hljs.highlightCode = function () { 
// 	//自定义highlightCode方法，将只执行一次的逻辑去掉
// 	let blocks = document.querySelectorAll('pre code');
//   [].forEach.call(blocks, hljs.highlightBlock);
// };

let rendererMD = new marked.Renderer();
marked.setOptions({
    renderer: rendererMD,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});

let _this;
export default {
  watch: {
        orgTreeShow(val){
            if(val){
                this.employeesShow = false;
            }else{
                this.loadEmployees()
            }
        }
    },
    beforeUpdate: function(){
        console.log('beforethis.$route',this.$route);
        if(this.$route.fullPath === '/view'){
            this.orgTreeShow = true
        }else{
            this.orgTreeShow = false;
        }
    },
    created () {
        console.log('this.$route',this.$route);
        this.orgTreeShow = false;
        if(this.$route.fullPath === '/view'){
            this.orgTreeShow = true
        }
        if(this.orgTreeShow){
            this.loadDeptsTree()
        }else{
            this.loadEmployees()
        }
    },// 上面的方法新加的，输出当前位置而已
  name: 'Article',
  components:{
    Comments,
   //mavonEditor
  },
  data () {
    return {
      params:{},
      cparams:{article_id:this.$route.params.id},
      detial:{
        content:''
      }
    }
  },
  watch: {
      detial: function() {
          this.$nextTick(() => { 
              addCodeBtn()
          });
      }
  },
  computed:{
    compiledMarkdown(){
      return '';
    }
  },
  mounted(){
    _this = this;
    _this.params = _this.$route.params;
    _this.getInfo()
   // hljs.highlightCode()
  },
  methods:{
    view(id) {
        this.$router.push({path: `/view/${id}`})
    },
    getInfo(){
      let _param = {
        id: _this.params.id
      }
      getArticleInfo(_param).then(res => {
        _this.detial = res.data
        _this.detial.content = marked(_this.detial.content)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.article
  width 70%
  .article-info
    margin 50px 0 10px 0
    width 100%
    color #555
    background-color unset 
    h2
      text-align center
      font-weight 400
      font-size 26px
      padding-bottom 10px
    .meta
      width 100%
      font-size 12px
      color #999
      display flex
      justify-content center
      .meta-divider
        padding 0 3px
    .content
      padding-top 20px
      .markdown-body
        text-align justify
        line-height 2
    .reward-container 
      padding 10px 0
      margin 20px auto
      width 90%
      text-align center
      #qr 
        padding-top 20px
        img 
          width 180px
          max-width 100%
          display inline-block
          margin 0.8em 2em 0 2em
        p 
          text-align center
    .post-copyright
      margin 2em 0 0
      padding 0.5em 1em
      border-left 3px solid #ff1700
      background-color #f9f9f9
      list-style none
      line-height 2
      strong 
        font-weight bolder
      a
        overflow-wrap break-word
        word-wrap break-word
        background-color transparent
        color #555
        text-decoration none
        outline none
        border-bottom 1px solid #ccc
        cursor pointer
    .article-end
      text-align center
      color #ccc
      font-size 16px
      padding 20px 0
    .tags 
      text-align left
      a 
        padding 1px 5px
        background #f5f5f5
        border-bottom none
        display inline-block
        margin-right 10px
        font-size 13px
    .prev-next
      padding 20px 0
      line-height 2
img
  width 100%




</style>
